const baseUrl = 'http://api-breakingnews-web.itheima.net' // 根路径

// 获取分类列表
axios.get(`${baseUrl}/my/article/cates`, {
  headers: {
    Authorization: localStorage.getItem('token')
  }
}).then(res => {
  console.log(res);
  const { data, status } = res.data
  if (status === 0) {
    // 1.拿到data数据遍历
    // 2.创建标签
    // 3.添加到容器中
    data.forEach(obj => {
      let theOpt = $(`<option value="${obj.Id}" lay-verify="cate">${obj.name}</option>`)
      $('select[name="cate_id"]').append(theOpt)
    });
    form.render('select', 'edit')
  }
})
// title	是	string	文章标题
// cate_id	是	int	所属分类 Id
// content	是	string	文章内容
// cover_img	是	blob二进制	文章封面
// state	是	string	状态，可选值为：已发布、草稿

// 给表单注册submit事件
$('form').on('submit', e => {
  e.preventDefault()
  // 富文本获取 => 
  const htmlStr = tinyMCE.activeEditor.getContent();
  // console.log(htmlStr);
  let fd = new FormData($('form')[0])
  // fd.forEach((v,i)=>{
  //   console.log(v,i); // 
  // })

  //如何往formData中添加
  // append() 添加 (如果是新的,那就通过append) 
  // set()    设置  (存在,想重新设置)
  fd.set('content', htmlStr)
  // 要求的blob 是一个blob对象
  // blob:http://ssssssxxxx 其实是一个blob url地址 (用来做前端展示的)


  // {type:'',size:''}  Blob ???如何生成这样的格式
  // 通过canvas 标签自带了这样的方法 => 可以转成 blob对象
  // 1.生成canvas
  // 把封面图片的裁剪区域提取出来
  const canvas = cropper.getCroppedCanvas({
    width: 100,
    height: 100
  });
  // 2.借助canvas方法去转换
  // 把canvas -> File(Blob)文件对象 (异步任务)
  canvas.toBlob(function (blobUrl) {
    // console.log(blobUrl); // 最终想要的值 =>后台需要的 {type:'image/png',size:10000}
    // 3.将blobUrl添加到fd里面
    fd.append('cover_img',blobUrl)
    // 4. 发送请求
    axios.post(`${baseUrl}/my/article/add`,fd,{
      headers:{
        Authorization: localStorage.getItem('token')
      }
    }).then(res=>{
      console.log(res);
      if(res.data.status === 0){
        // 跳转到文章列表页面
        location.href = './../list/list.html'
      }
    })
  })
})


// 选择图片
$('.select').on('click', () => {
  // // JS代码来主动触发input[type=file]的点击事件 - 选择文件的窗口就出来
  $("#file").click();
})
// 监听input的change事件
$("#file").on('change', e => {
  //拿到图片信息
  let file = e.target.files[0]
  let url = URL.createObjectURL(file);
  // console.log(url);
  // URL是window内置的对象, createObjectURL就是把blob对象(File的父类)转成url地址(浏览器本地的-跟后台无关)
  cropper.replace(url); // 让cropper重新设置图片url地址以及重新构建cropper
})




// 3. 集成图片裁剪的插件
let cropper;
function initCropper() {
  // 1. 集成裁剪插件
  const image = document.getElementById('image'); // 获取到要被添加裁剪插件的图片
  cropper = new Cropper(image, {
    aspectRatio: 1, // 横纵比例
    preview: $(".img-preview")
  });
}
initCropper();

initEditor() // 初始化富文本

// publisher页面 - 文章标题
const form = layui.form;
form.verify({
  articleTitle: [
    /^[\u4E00-\u9FA5a-zA-Z0-9_-]+$/,
    "标题只能是中英文, 数字下划线中划线组成"
  ],
  // 分类判断
  cate: function () {
    // if($("select[name=cate_id]").val().length == 0){
    //   return '请选择文章类别'
    // }
    return $("select[name=cate_id]").val().length == 0 && "请选择文章类别"
  }
})